<template>
    <table style="border: 1px;">
        <thead>
            <tr>
                <template v-for="(item, index) in theadList" :key="theadList.index">
                    <th>{{ item.name }}</th>
                </template>
            </tr>
        </thead>
        <tbody>
                <tr v-for="item in renderData" :key="item._id">
                    <template v-for="i in theadList" :key="item.value">
                        <td v-if="$slots[i.value]">
                            <slot :name="i.value" :item="item"></slot>
                        </td>
                        <td v-else>{{ item[i.value] }}</td>
                    </template>
                </tr>
        </tbody>
    </table>
</template>

<script setup>
import { computed, ref } from 'vue';

const { theadList, renderData } = defineProps({
    theadList: {
        type: Object,
        required: true
    },
    renderData: {
        type: Object,
        required: true
    }
});
</script>

<style scoped></style>